<template>
	<view>
		<view class="m-2 d-flex flex-column bg-white">
			<view class="d-flex flex-row j-center a-center" style="height: 300upx;">
				<image src="../../static/icon/moni_grade_icon.png" style="width:100upx;height: 100upx;"></image>
			</view>
			<view class="d-flex flex-row flex-wrap j-center" style="width: 710upx;" >
				
				
				<view class="d-flex flex-column item_con" style="width: 710upx;">
					<view class="item_num">
						<text style="font-weight: bold;color: #e22424;font-size: 40upx;">{{ simulateGrade.simulateScore }}</text>
					</view>
					<view>
						<text style="font-weight: bold;">考试成绩</text>
					</view>
				</view>
				
				<view class="d-flex flex-column item_con">
					<view class="item_num">
						<text>{{ simulateGrade.questionNum }}</text>
					</view>
					<view>
						<text>总题数</text>
					</view>
				</view>
				
				<view class="d-flex flex-column item_con">
					<view class="item_num">
						<text>{{ simulateGrade.rightNum + simulateGrade.wrongNum }}</text>
					</view>
					<view>
						<text>本次答题</text>
					</view>
				</view>
				<view class="d-flex flex-column item_con">
					<view class="item_num">
						<text>{{ simulateGrade.noanswerNum }}</text>
					</view>
					<view>
						<text>未答题</text>
					</view>
				</view>
				<view class="d-flex flex-column item_con">
					<view class="item_num">
						<text>{{ simulateGrade.wrongNum }}</text>
					</view>
					<view>
						<text>答错题</text>
					</view>
				</view>
				<view class="d-flex flex-column item_con">
					<view class="item_num">
						<text>{{ simulateGrade.accuracy }}</text>
					</view>
					<view>
						<text>正确率</text>
					</view>
				</view>
				<view class="d-flex flex-column item_con">
					<view class="item_num">
						<text>{{ simulateGrade.duration }}分钟</text>
					</view>
					<view>
						<text>答题时长</text>
					</view>
				</view>
			</view>
			
			<view class="my-2 px-1" style="text-align: center;margin-top:40upx;">
				<button class="main_btn" @click="gotoErrorAnswer">错题专项练习</button>
			</view>
			
			<view class="my-2 d-flex flex-row flex-nowrap j-sb" style="width: 710upx;" >
				<button class="main_gray_btn" style="width:340upx;" @click="gotoPaperAnalysis(2)">错题解析</button>
				<button class="main_gray_btn" style="width:340upx;" @click="gotoPaperAnalysis(1)">试卷解析</button>
			</view>
			
			
		</view>
		<!--
		<uni-fab horizontal="right" :pattern="pattern"  @fabClick="backHome">返回</uni-fab>
		-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#425ca1',
					selectedColor: '#007AFF',
					buttonColor: '#425ca1',
					iconColor: '#fff',
					icon: 'home',
				},
				
				answerPaperId: '',
				simulateGrade: {},
			}
		},
		
		onLoad(option) {
		  this.answerPaperId = option.id
		  // 查询考试成绩
		  this.getExamGrade()
		},
		
		methods: {
			// 查询考试情况
			getExamGrade(){
				let url = "/moni/getSimulateGrade"
				let param = {
					id: this.answerPaperId,
				}
				this.$H.post(url, param, {token: true}).then(res=>{					
					if(!res || res.code != 200){
						return uni.showToast({
							title: '操作失败'
						})
					}
					
					this.simulateGrade = res.result
				}).catch( err =>{
					if(err.msg){
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
					uni.hideLoading()
				})
			},
			
			backHome(){
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			
			// 跳转试卷解析页面
			gotoPaperAnalysis(type){
				uni.navigateTo({
					url: '/pages/moni/paper_analysis?examId=' + this.simulateGrade.id + "&paperId=" + this.simulateGrade.paperId +
						"&staffId=" + this.simulateGrade.staffId + "&type=" + type
				})
			},
			
			// 跳转专项错练习页面
			gotoErrorAnswer(type){
				uni.navigateTo({
					url: '/pages/cuoti/index'
				})
				
				/**
				uni.navigateTo({
					url: '/pages/moni/answer_error?examId=' + this.simulateGrade.id + "&paperId=" + this.simulateGrade.paperId +
						"&staffId=" + this.simulateGrade.staffId
				})*/
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
		background: #f1f1f1;
	}
	
	.item_con{
		width: 235upx; text-align: center; line-height: 60upx; margin-top: 20upx;
	}
	
	.item_num{
		font-size: 30upx;color:#425ca1;font-weight: bold;line-height: 90upx;
	}
	
	
</style>
